<!DOCTYPE html>
<html>
<head>
<title>Single</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<link rel="stylesheet" href="css/etalage.css" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easydropdown.js"></script>
<script src="js/jquery.etalage.min.js"></script>
<script>
			jQuery(document).ready(function($){

				$('#etalage').etalage({
					thumb_image_width: 300,
					thumb_image_height: 400,
					source_image_width: 900,
					source_image_height: 1200,
					show_hint: true,
					click_callback: function(image_anchor, instance_id){
						alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
					}
				});

			});
		</script>

</head>
<body> 
	<!--header-->
	<div class="header">
		<div class="top-header">
			<div class="container">
				<div class="top-header-left">
					<ul class="support">
						<li><a href="#"><label> </label></a></li>
						<li><a href="#">24x7 live<span class="live"> support</span></a></li>
					</ul>
					<ul class="support">
						<li class="van"><a href="#"><label> </label></a></li>
						<li><a href="#">Free shipping <span class="live">on order over 500</span></a></li>
					</ul>
					<div class="clearfix"> </div>
				</div>
				<div class="top-header-right">
					<div class="down-top">
						
						 <select tabindex="4" class="dropdown">
						 	<option value="" class="label" value="">English</option>
							<option value="1">Japanese</option>
							<option value="2">French</option>
							<option value="3">German</option>
						  </select>
					 </div>
					<div class="down-top top-down">
						
						 <select tabindex="4" class="dropdown ">
						 	<option value="" class="label" value="">Currency :USD</option>
							<option value="1">Dollar</option>
							<option value="2">Euro</option>
						  </select>
					 </div>
					<div class="clearfix"> </div>	
				</div>
				<div class="clearfix"> </div>		
			</div>
		</div>
		<div class="bottom-header">
			<div class="container">
				<div class="header-bottom-left">
					<div class="logo">
						<a href="mall_index.html"><img src="images/logo.png" alt=" " /></a>
					</div>
					<div class="search">
						<input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" >
						<input type="submit"  value="SEARCH">

					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="header-bottom-right">
					<ul class="men-grid">
						<li class="cart"><a href="#"><span> </span>CART</a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>	
			</div>
		</div>
	</div>
	<!---->
	
	 <div class="container"> 
	 	
	 	<div class=" single_top">
	      <div class="single_grid">
				<div class="grid images_3_of_2">
						<ul id="etalage">
							<li>
								<a href="optionallink.html">
									<img class="etalage_thumb_image" src="images/s4.jpg" class="img-responsive" />
									<img class="etalage_source_image" src="images/si4.jpg" class="img-responsive" title="" />
								</a>
							</li>
							<li>
								<img class="etalage_thumb_image" src="images/s2.jpg" class="img-responsive" />
								<img class="etalage_source_image" src="images/si2.jpg" class="img-responsive" title="" />
							</li>
							<li>
								<img class="etalage_thumb_image" src="images/s3.jpg" class="img-responsive"  />
								<img class="etalage_source_image" src="images/si3.jpg"class="img-responsive"  />
							</li>
						    <li>
								<img class="etalage_thumb_image" src="images/s1.jpg" class="img-responsive"  />
								<img class="etalage_source_image" src="images/si1.jpg"class="img-responsive"  />
							</li>
						</ul>
						 <div class="clearfix"> </div>		
				  </div> 
				  <div class="desc1 span_3_of_2">
					<h1>爱马仕</h1>
					<ul class="price_single">
					  <li class="head"><h2>￥98.95</h2></li>

					  <div class="clearfix"></div>
					</ul>

					<p>数量：</p>
					<p>规格：</p>
					<p>简介xxxxxxxxxxx</p>

			         <a href="#" class="now-get">加入购物车</a>
					  <a href="#" class="now-get">立即购买</a>
			        
				</div>
          	    <div class="clearfix"> </div>
          	   </div>

	    <script type="text/javascript">
		 $(window).load(function() {
			$("#flexiselDemo1").flexisel({
				visibleItems: 5,
				animationSpeed: 1000,
				autoPlay: true,
				autoPlaySpeed: 3000,    		
				pauseOnHover: true,
				enableResponsiveBreakpoints: true,
		    	responsiveBreakpoints: { 
		    		portrait: { 
		    			changePoint:480,
		    			visibleItems: 1
		    		}, 
		    		landscape: { 
		    			changePoint:640,
		    			visibleItems: 2
		    		},
		    		tablet: { 
		    			changePoint:768,
		    			visibleItems: 3
		    		}
		    	}
		    });
		    
		});
	</script>
	<script type="text/javascript" src="js/jquery.flexisel.js"></script>

          	    	<div class="toogle">
				     	<h3 class="m_3">商品详情</h3>
				     	<p class="m_text">这是一个包</p>
				     </div>	
          	   </div>
          	   
          	   <!---->
		 <div class="sub-cate">
			 <div class=" top-nav rsidebar span_1_of_left">
				 <h3 class="cate">分类</h3>
				 <ul class="menu">
					 <li class="item1"><a href="#">鞋子<img class="arrow-img" src="images/arrow1.png" alt=""/> </a>
						 <ul class="cute">
							 <li class="subitem1"><a href="mall_list2.html">休闲鞋</a></li>
							 <li class="subitem2"><a href="mall_list2.html">跑鞋</a></li>
							 <li class="subitem3"><a href="mall_list2.html">篮球鞋</a></li>
						 </ul>
					 </li>
					 <li class="item2"><a href="#">上衣<img class="arrow-img " src="images/arrow1.png" alt=""/></a>
						 <ul class="cute">
							 <li class="subitem1"><a href="mall_list2.html">紧身上衣</a></li>
							 <li class="subitem2"><a href="mall_list2.html">运动短袖</a></li>
							 <li class="subitem3"><a href="mall_list2.html">夹克</a></li>
						 </ul>
					 </li>
					 <li class="item3"><a href="#">裤子<img class="arrow-img img-arrow" src="images/arrow1.png" alt=""/> </a>
						 <ul class="cute">
							 <li class="subitem1"><a href="mall_list2.html">休闲裤子</a></li>
							 <li class="subitem2"><a href="mall_list2.html">篮球裤</a></li>
							 <li class="subitem3"><a href="mall_list2.html">运动裤</a></li>
						 </ul>
					 </li>
					 <li class="item4"><a href="#">篮球<img class="arrow-img img-left-arrow" src="images/arrow1.png" alt=""/></a>
						 <ul class="cute">
							 <li class="subitem1"><a href="mall_list2.html">篮球配件</a></li>
							 <li class="subitem2"><a href="mall_list2.html">双肩背包</a></li>
							 <li class="subitem3"><a href="mall_list2.html">篮球</a></li>
						 </ul>
					 </li>
					 <li>
						 <ul class="kid-menu">
							 <li><a href="mall_list2.html">我的收藏</a></li>
							 <li ><a href="mall_list2.html">我的订单</a></li>
							 <li ><a href="mall_list2.html">Ornared id aliquet</a></li>
						 </ul>
					 </li>
					 <ul class="kid-menu ">
						 <li><a href="mall_list2.html">Commodo sit</a></li>
						 <li ><a href="mall_list2.html">Urna ac tortor sc</a></li>
						 <li><a href="mall_list2.html">Ornared id aliquet</a></li>
						 <li><a href="mall_list2.html">Urna ac tortor sc</a></li>
						 <li ><a href="mall_list2.html">Eget nisi laoreet</a></li>
						 <li><a href="mall_list2.html">Faciisis ornare</a></li>
						 <li class="menu-kid-left"><a href="contact.html">Contact us</a></li>
					 </ul>
				 </ul>
			 </div>				<!--initiate accordion-->
		<script type="text/javascript">
			$(function() {
			    var menu_ul = $('.menu > li > ul'),
			           menu_a  = $('.menu > li > a');
			    menu_ul.hide();
			    menu_a.click(function(e) {
			        e.preventDefault();
			        if(!$(this).hasClass('active')) {
			            menu_a.removeClass('active');
			            menu_ul.filter(':visible').slideUp('normal');
			            $(this).addClass('active').next().stop(true,true).slideDown('normal');
			        } else {
			            $(this).removeClass('active');
			            $(this).next().stop(true,true).slideUp('normal');
			        }
			    });
			
			});
		</script>
			</div>
<div class="clearfix"> </div>			
		</div>
	<!---->
	<div class="footer">
		<div class="footer-top">
			<div class="container">
				<div class="latter">
					<h6>NEWS-LATTER</h6>
					<div class="sub-left-right">
						<form>
							<input type="text" value="Enter email here"onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter email here';}" />
							<input type="submit" value="SUBSCRIBE" />
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="latter-right">
					<p>FOLLOW US</p>
					<ul class="face-in-to">
						<li><a href="#"><span> </span></a></li>
						<li><a href="#"><span class="facebook-in"> </span></a></li>
						<div class="clearfix"> </div>
					</ul>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>


</body>
</html>